<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			html{
				height:100%;
			}
			body{
				height:100%;
			}		
			body{
				background-image:url("imgs/1.jpg");
				background-repeat:no-repeat;
				background-size:cover;
			}
			.img-list{
				display: none;
				width: 100%;
				height: 200px;
				background-color: rgba(0,0,0,0.6);
			}
			.img-list ul{
				display:flex;
				justify-content:space-around;
				align-items:center;
				list-style:none;
				height:200px;				
			}
			.btn {
				position: absolute;
				top: 0;
				right: 0;
				width:50px;
				height:50px;
				background-image: url(imgs/upseek.png);
			}
			.btn:hover{
				background-position-y:-64px;
			}
		</style>
	</head>
	<body>
		<div class="img-list">
			<ul>
				<li data-src="imgs/1.jpg"><img src="imgs/1-1.jpg" height="100"></li>
				<li data-src="imgs/2.jpg"><img src="imgs/2-2.jpg" height="100"></li>
				<li data-src="imgs/3.jpg"><img src="imgs/3-3.jpg" height="100"></li>
				<li data-src="imgs/4.jpg"><img src="imgs/4-4.jpg" height="100"></li>
				<li data-src="imgs/5.jpg"><img src="imgs/5-5.jpg" height="100"></li>
			</ul>
		</div>
		<div class="btn"></div>
		<script type="text/javascript" src="js/jquery.js" ></script>
			<script>
				$(".btn").click(function(){
					$(".img-list").slideToggle();
				});
				
				$("li").click(function(){
					var src = $(this).attr("data-src");
					$("body").css({
						"background-image":"url("+src+")"
					})
				});
			</script>
	</body>
</html>

